<template>
	<div>
		<div class="swiper">
			<swiper :options="swiperOption">
				<swiper-slide v-for="(item,index) in recActive" :key="index" @click.native="godetail(item)">
					<img :src="item.default_img" alt="">
					<div class="swipertitle">
						<div class="title van-ellipsis">{{item.title}}</div>
						<div class="date">活动时间：{{item.active_start_date}}</div>
					</div>
				</swiper-slide>
			</swiper>
			<div class="swiper-pagination"></div>
			<!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
		</div>
		<navTitle :title="activeList[0].typename" class="title" :normal="activeList.length>=2"
			path="/active/allactive?type=2" v-if="activeList.length"></navTitle>
		<div class="themeList ">
			<div class="themeItem" v-for="(item,index) in activeList" :key="index" @click="godetail(item)">
				<van-image class="activeImg" width="164px" height="98px" fit="contain" round :src="item.default_img" />
				<div class="themeInfo">
					<div class="name van-ellipsis">{{item.title}}</div>
					<div class="date">{{item.active_start_date}}</div>
					<div class="pricebox">
						<div class="price">¥ {{item.price_show}}</div>
						<div :class="['status' ,'status'+item.active_status]" v-if="item.active_status_show">
							{{item.active_status_show}}</div>
					</div>
				</div>
			</div>
		</div>
		<navTitle :title="themeList[0].typename" class="title" :normal="activeList.length>=2"
			path="/active/allactive?type=3" v-if="themeList.length"></navTitle>
		<div class="themeList ">
			<div class="themeItem" v-for="(item,index) in themeList" :key="index" @click="godetail(item)">
				<van-image class="activeImg" width="164px" height="98px" fit="contain" round :src="item.default_img" />
				<div class="themeInfo">
					<div class="name van-ellipsis">{{item.title}}</div>
					<div class="date">{{item.active_start_date}}</div>
					<div class="pricebox">
						<div class="price">¥ {{item.price_show}}</div>
						<div :class="['status' ,'status'+item.active_status]" v-if="item.active_status_show">
							{{item.active_status_show}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="endBottom" v-if="list.length">已经到底啦</div>
		<empty v-if="list.length===0"></empty>
	</div>
</template>

<script>
	import navTitle from '@/components/navTitle'
	import {
		ActiveIndex,
		indexData
	} from '@/http/active'
	import wx from 'weixin-js-sdk'
	import empty from '@/components/empty'

	export default {
		name: "index",
		components: {
			navTitle,
			empty
		},
		data() {
			var that = this;
			return {
				banner: [],
				swiperOption: {
					slidesPerView: 'auto', //重要 可以去swiper搜索
					centeredSlides: true, //重要
					paginationClickable: true,
					effect: 'left',
					// loop: true,
					coverflowEffect: {
						rotate: 20,
						stretch: 10,
						depth: 60,
						modifier: 2,
					},
					pagination: {
						el: '.swiper-pagination',
					},
					lazy: {
						loadPrevNext: true,
					},
					observer: true,
					observeParents: true
				},
				recSwiperOption: {
					slidesPerView: 'auto', //重要 可以去swiper搜索
					centeredSlides: true, //重要
					paginationClickable: true,
					effect: 'left',
					// loop: true,
					coverflowEffect: {
						rotate: 20,
						stretch: 10,
						depth: 60,
						modifier: 2,
					},
					lazy: {
						loadPrevNext: true,
					},
					observer: true,
					observeParents: true,
					// loop: true,
					on: {
						slideChangeTransitionStart: function() {
							console.log(this.realIndex)
							that.recIndex = this.realIndex;
						},
					},
				},
				currentIndex: 0,
				recActive: [],
				recIndex: 0,
				activeList: [],
				themeList: [],
				list: []
			}
		},
		created() {
			this._indexData();
			this._ActiveIndex();
			if (this.$route.query.api_token) {
				localStorage.setItem('api_token', this.$route.query.api_token);
			}
		},
		methods: {
			_ActiveIndex() {
				ActiveIndex(0, 1, 10).then(res => {
					if (res.status == 1) {
						let data = res.data;
						this.list = res.data;
						this.recActive = data.filter(item => {
							return item.type === 1
						});
						this.activeList = data.filter(a => {
							return a.type === 2
						});
						this.themeList = data.filter(b => {
							return b.type === 3
						});
					}
				})
			},
			_indexData() {
				indexData().then(res => {
					if (res.status == 1) {
						this.banner = res.data.active;
					}
				})
			},
			godetail(d) {
				this.$router.push({
					path: '/active/acDetail',
					query: {
						active_id: d.active_id,
						is_always: d.is_always,
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		position: relative;

		/deep/ .swiper-wrapper {
			font-size: 0;
			padding: 5px 0;
		}

		/deep/ .swiper-pagination {
			right: 0;
			left: 0;
			margin: 0 auto;
			font-size: 0;
			bottom: -24px;

			.swiper-pagination-bullet {
				width: 48px;
				height: 6px;
				background: #F2F2F2;
				border-radius: 3px;
				opacity: 1;
				margin-right: 20px;
				transition: ease-in-out 0.3s;

				&.swiper-pagination-bullet-active {
					background-color: #B5B5B5;
					width: 72px;
				}
			}
		}

		/deep/ .swiper-slide {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80% !important;
			transform: scale(0.9);
			transition: all 0.3s;
			border-radius: 20px;
			overflow: hidden;
			position: relative;

			img {
				width: 100%;
				border-radius: 20px;
			}

			&.swiper-slide-active {
				transform: scale(1);
			}

			.swipertitle {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: flex-end;
				flex-direction: column;
				padding: 0 28px;
				color: #fff;
				line-height: 55px;
				background: linear-gradient(transparent, transparent, rgba(0, 0, 0, .25), rgba(0, 0, 0, .5));

				.title {
					font-size: 32px;
				}

				.date {
					font-size: 28px;
				}
			}
		}
	}

	.recSwiper {
		height: 450px;
		padding-left: 24px;

		.swiperitem {
			width: 80% !important;
			margin: 0 auto;
			height: 450px;
			overflow: hidden;
			border-radius: 24px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.swiperimg {
				//width: 670px;
				/*width: 100%;*/
				width: 90%;
				display: block;
				height: 324px;
				margin: 0 auto;
				overflow: hidden;
				border-radius: 24px;

			}

			.name {
				font-size: 30px;
			}

			.limitBox {
				color: $fzColor;
				font-size: 28px;

				.max {
					color: #757575;
					font-size: 28px;
				}
			}

			.price {
				color: $priceColor;
				font-size: 30px;
			}
		}
	}

	.activeList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24px;

		.activeItem {
			width: 339px;
			margin-bottom: 35px;
			height: 320px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.activeImg {
				width: 339px;
				height: 191px;
				border-radius: 20px;
				overflow: hidden;

				img {
					border-radius: 20px;
				}
			}

			.name {
				font-size: 30px;
			}

			.limitBox {
				color: $fzColor;
				font-size: 28px;

				.max {
					color: #757575;
					font-size: 28px;
				}
			}

			.price {
				color: $priceColor;
				font-size: 30px;
			}
		}
	}

	.themeList {
		padding: 0 24px;

		.themeItem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30px;
			border-bottom: 1px solid $bordercolor;
			margin-top: 30px;

			.van-image {
				flex-shrink: 0;
				width: 328px;
				border-radius: 20px;
			}

			.themeInfo {
				flex: 1;
				height: 196px;
				display: flex;
				margin: 0 0 0 23px;
				padding: 15px 0;
				justify-content: space-between;
				flex-direction: column;

				.name {
					font-size: 30px;
					max-width: 330px;
					flex-shrink: 0;
				}

				.date {
					font-size: 26px;
					color: #646464;
				}

				.limitBox {
					color: $fzColor;
					font-size: 28px;

					.max {
						color: #757575;
						font-size: 28px;
					}
				}

				.pricebox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: $priceColor;
						font-size: 30px;
					}

					.status {
						border-radius: 20px;
						padding: 10px 25px;
						color: #fff;
						font-size: 28px;

						&.status1 {
							background-color: #fd9e18;
						}

						&.status2 {
							background-color: #f75c58;
						}

						&.status3 {
							background-color: #f75c58;
						}

						&.status4 {
							background-color: #dadada;
						}

						&.status5 {
							background-color: #dadada;
						}
					}
				}

			}
		}
	}

	/deep/ .navBox {
		margin: 66px 0;

		.titleRight {
			.cur {
				font-size: 30px;
				color: $fzColor;
				font-weight: bold;
			}

			.length {
				font-size: 26px;
				color: #646464;
			}
		}
	}

	.endBottom {
		padding: 71px 0;
		text-align: center;
		font-size: 26px;
		color: #ADADAD;
	}
</style>
